<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="../font-awesome/css/font-awesome.css">
    <link rel="stylesheet" href="../css/mui.css">
    <link rel="stylesheet" href="./css/demo-common.css">
    <link rel="stylesheet" href="./css/atom-one-light.css">
    <script src="./js/jquery-2.2.3.min.js"></script>
    <script src="./js/highlight.pack.js"></script>
  </head>
  <body>
    <h3>Button按钮</h3>
    <p>你可以使用<mark>&lt;button&gt;</mark>,<mark>&lt;a&gt;</mark>,<mark>&lt;span&gt;</mark>等标签的任意一种创建按钮。</p>
    <p>注意：只有<mark>&lt;button&gt;</mark>标签创建的按钮有<mark>:focus</mark>效果。</p>
    <br>

    <h4>按钮大小</h4>
    <section>
      <div class="example">
        <div>
          <span class="btn btn-primary btn-small">小按钮</span>
          <span class="btn btn-primary btn-medium">中按钮</span>
          <span class="btn btn-primary btn-large">大按钮</span>
        </div>
      </div>
      <pre><code>
  &lt;span class="btn btn-primary btn-small">小按钮&lt;/span&gt;
  &lt;span class="btn btn-primary btn-medium">中按钮&lt;/span&gt;
  &lt;span class="btn btn-primary btn-large">大按钮&lt;/span&gt;
      </code></pre>
    </section>

    <h4>按钮类型和颜色</h4>
    <section>
      <div class="example">
        <h5>默认按钮</h5>
        <p>使用类名<mark>.btn</mark>，创建默认风格的按钮。</p>
        <br>
        <button class="btn btn-primary btn-medium">primary</button>
        <button class="btn btn-default btn-medium">default</button>
        <button class="btn btn-success btn-medium">success</button>
        <button class="btn btn-danger btn-medium">danger</button>
        <br/><br/>
        <h5>轮廓按钮</h5>
        <p>使用类名<mark>.btn-outline</mark>，创建轮廓风格的按钮。</p>
        <br>
        <button class="btn-outline btn-primary btn-medium">primary</button>
        <button class="btn-outline btn-default btn-medium">default</button>
        <button class="btn-outline btn-success btn-medium">success</button>
        <button class="btn-outline btn-danger btn-medium">danger</button>
        <br/><br/>
        <h5>轻量按钮</h5>
        <p>使用类名<mark>.btn-light</mark>，创建轻量按钮。</p>
        <p>轻量按钮只有在鼠标悬停或获得焦点时才有背景颜色。</p>
        <br/>
        <button class="btn-light btn-primary btn-medium">primary</button>
        <button class="btn-light btn-default btn-medium">default</button>
        <button class="btn-light btn-success btn-medium">success</button>
        <button class="btn-light btn-danger btn-medium">danger</button>
      </div>
      <pre><code>
  &lt;!--默认按钮--&gt;
  &lt;button class="btn btn-primary btn-medium"&gt;primary&lt;/button&gt;
  &lt;button class="btn btn-default btn-medium"&gt;default&lt;/button&gt;
  &lt;button class="btn btn-success btn-medium"&gt;success&lt;/button&gt;
  &lt;button class="btn btn-danger btn-medium"&gt;danger&lt;/button&gt;
  
  &lt;!--轮廓按钮--&gt;
  &lt;button class="btn-outline btn-primary btn-medium"&gt;primary&lt;/button&gt;
  &lt;button class="btn-outline btn-default btn-medium"&gt;default&lt;/button&gt;
  &lt;button class="btn-outline btn-success btn-medium"&gt;success&lt;/button&gt;
  &lt;button class="btn-outline btn-danger btn-medium"&gt;danger&lt;/button&gt;

  &lt;!--轻量按钮--&gt;
  &lt;button class="btn-light btn-primary btn-medium"&gt;primary&lt;/button&gt;
  &lt;button class="btn-light btn-default btn-medium"&gt;default&lt;/button&gt;
  &lt;button class="btn-light btn-success btn-medium"&gt;success&lt;/button&gt;
  &lt;button class="btn-light btn-danger btn-medium"&gt;danger&lt;/button&gt;
      </code></pre>
      <div class="example" style="border-top:1px solid #ccc">
        <h5>反色按钮</h5>
        <p>反色按钮用于在较深的背景上显示</p>
        <div style="padding:20px;background-color:grey">
          <a class="btn btn-inverted btn-medium">反色按钮</a>
          <a class="btn-outline btn-inverted btn-medium">反色按钮</a>
          <a class="btn-light btn-inverted btn-medium">反色按钮</a>
        </div>
      </div>
      <pre class="html"><code>
  &lt;a class="btn btn-inverted btn-medium"&gt;反色按钮&lt;/a&gt;
  &lt;a class="btn-outline btn-inverted btn-medium"&gt;反色按钮&lt;/a&gt;
  &lt;a class="btn-light btn-inverted btn-medium"&gt;反色按钮&lt;/a&gt;
      </code></pre>
    </section>

    <h4>图标</h4>
    <section>
      <div class="example">
        <div>
          <button class="btn btn-primary btn-medium">
              <i class="fa fa-cloud"></i>
              按钮
          </button>
          <button class="btn btn-default btn-medium">
              <i class="fa fa-cloud"></i>
              按钮
          </button>
          <button class="btn-outline btn-primary btn-medium">
              <i class="fa fa-cloud"></i>
              按钮
          </button>
          <button class="btn-outline btn-danger btn-medium">
              <i class="fa fa-cloud"></i>
              按钮
          </button>
          <button class="btn-light btn-default btn-medium">
              <i class="fa fa-cloud"></i>
              按钮
          </button>
        </div>
        <br><br>
        <p>添加类名<mark>.btn-icon</mark>，创建图标按钮。</p>
        <br>
        <span class="btn btn-icon btn-primary btn-large">
            <i class="fa fa-search"></i>
        </span>
        <span class="btn btn-icon btn-primary btn-medium">
            <i class="fa fa-search"></i>
        </span>
        <span class="btn btn-icon btn-primary btn-small">
            <i class="fa fa-search"></i>
        </span>
        <span class="btn-outline btn-icon btn-primary btn-large">
            <i class="fa fa-search"></i>
        </span>
        <span class="btn-outline btn-icon btn-primary btn-medium">
            <i class="fa fa-search"></i>
        </span>
        <span class="btn-outline btn-icon btn-primary btn-small">
            <i class="fa fa-search"></i>
        </span>
        <span class="btn-light btn-icon btn-default btn-large">
            <i class="fa fa-search"></i>
        </span>
        <span class="btn-light btn-icon btn-default btn-medium">
            <i class="fa fa-search"></i>
        </span>
        <span class="btn-light btn-icon btn-default btn-small">
            <i class="fa fa-search"></i>
        </span>
      </div>
      <pre><code>
  &lt;button class="btn btn-primary btn-medium"&gt;
      &lt;i class="fa fa-cloud"&gt;&lt;/i&gt;
      按钮
  &lt;/button&gt;
  &lt;button class="btn btn-default btn-medium"&gt;
      &lt;i class="fa fa-cloud"&gt;&lt;/i&gt;
      按钮
  &lt;/button&gt;
  &lt;button class="btn-outline btn-primary btn-medium"&gt;
      &lt;i class="fa fa-cloud"&gt;&lt;/i&gt;
      按钮
  &lt;/button&gt;
  &lt;button class="btn-outline btn-danger btn-medium"&gt;
      &lt;i class="fa fa-cloud"&gt;&lt;/i&gt;
      按钮
  &lt;/button&gt;
  &lt;button class="btn-light btn-default btn-medium"&gt;
      &lt;i class="fa fa-cloud"&gt;&lt;/i&gt;
      按钮
  &lt;/button&gt;

  &lt;span class="btn btn-icon btn-primary btn-large"&gt;
      &lt;i class="fa fa-search"&gt;&lt;/i&gt;
  &lt;/span&gt;
  &lt;span class="btn btn-icon btn-primary btn-medium"&gt;
      &lt;i class="fa fa-search"&gt;&lt;/i&gt;
  &lt;/span&gt;
  &lt;span class="btn btn-icon btn-primary btn-small"&gt;
      &lt;i class="fa fa-search"&gt;&lt;/i&gt;
  &lt;/span&gt;
  &lt;span class="btn-outline btn-icon btn-primary btn-large"&gt;
      &lt;i class="fa fa-search"&gt;&lt;/i&gt;
  &lt;/span&gt;
  &lt;span class="btn-outline btn-icon btn-primary btn-medium"&gt;
      &lt;i class="fa fa-search"&gt;&lt;/i&gt;
  &lt;/span&gt;
  &lt;span class="btn-outline btn-icon btn-primary btn-small"&gt;
      &lt;i class="fa fa-search"&gt;&lt;/i&gt;
  &lt;/span&gt;
  &lt;span class="btn-light btn-icon btn-default btn-large"&gt;
      &lt;i class="fa fa-search"&gt;&lt;/i&gt;
  &lt;/span&gt;
  &lt;span class="btn-light btn-icon btn-default btn-medium"&gt;
      &lt;i class="fa fa-search"&gt;&lt;/i&gt;
  &lt;/span&gt;
  &lt;span class="btn-light btn-icon btn-default btn-small"&gt;
      &lt;i class="fa fa-search"&gt;&lt;/i&gt;
  &lt;/span&gt;
      </code></pre>
    </section>

    <h4>禁用状态</h4>
    <section>
      <div class="example">
        <button class="btn btn-primary btn-medium" disabled>Search</button>
        <button class="btn-outline btn-primary btn-medium" disabled>Search</button>
        <button class="btn-light btn-primary btn-medium" disabled>Search</button>
      </div>
      <pre><code>
  &lt;button class="btn btn-primary btn-medium" disabled&gt;Search&lt;/button&gt;
  &lt;button class="btn-outline btn-primary btn-medium" disabled&gt;Search&lt;/button&gt;
  &lt;button class="btn-light btn-primary btn-medium" disabled&gt;Search&lt;/button&gt;
      </code></pre>
    </section>

    <h4>Loading状态</h4>
    <section>
      <div class="example">
        <p>添加类名<mark>.loading</mark>，实现loading样式。</p>
        <br>
        <button class="btn btn-primary btn-medium loading">
          <i class="fa fa-refresh fa-spin"></i>
          Loading
        </button>
        <button class="btn btn-default btn-medium loading">
          <i class="fa fa-spinner fa-spin"></i>
          Loading
        </button>
      </div>
      <pre><code>
  &lt;button class="btn btn-primary btn-medium loading"&gt;
      &lt;i class="fa fa-refresh fa-spin"&gt;&lt;/i&gt;
      Loading
  &lt;/button&gt;
  &lt;button class="btn btn-default btn-medium loading"&gt;
      &lt;i class="fa fa-spinner fa-spin"&gt;&lt;/i&gt;
      Loading
  &lt;/button&gt;
      </code></pre>
    </section>

    <h4>按钮组</h4>
    <section>
      <div class="example">
          <div class="btn-group">
            <button class="btn btn-default btn-medium">Left</button>
            <button class="btn btn-default btn-medium">Middle</button>
            <button class="btn btn-default btn-medium">Right</button>
          </div>
          &nbsp;&nbsp;&nbsp;&nbsp;
          <div class="btn-group">
            <button class="btn-outline btn-success btn-medium">YES</button>
            <button class="btn-outline btn-danger btn-medium">NO</button>
          </div>
          &nbsp;&nbsp;&nbsp;&nbsp;
          <div class="btn-group">
            <button class="btn btn-default btn-medium">取消</button>
            <button class="btn btn-primary btn-medium">确认</button>
          </div>
          &nbsp;&nbsp;&nbsp;&nbsp;
          <div class="btn-group">
            <button class="btn btn-primary btn-small">
              <i class="fa fa-angle-left"></i>
            </button>
            <button class="btn btn-primary btn-small">
              <i class="fa fa-angle-right"></i>
            </button>
          </div>
      </div>
      <pre><code>
    &lt;div class="btn-group"&gt;
        &lt;button class="btn btn-default btn-medium"&gt;Left&lt;/button&gt;
        &lt;button class="btn btn-default btn-medium"&gt;Middle&lt;/button&gt;
        &lt;button class="btn btn-default btn-medium"&gt;Right&lt;/button&gt;
    &lt;/div&gt;

    &lt;div class="btn-group"&gt;
        &lt;button class="btn-outline btn-success btn-medium"&gt;YES&lt;/button&gt;
        &lt;button class="btn-outline btn-danger btn-medium"&gt;NO&lt;/button&gt;
    &lt;/div&gt;

    &lt;div class="btn-group"&gt;
        &lt;button class="btn btn-default btn-medium"&gt;取消&lt;/button&gt;
        &lt;button class="btn btn-primary btn-medium"&gt;确认&lt;/button&gt;
    &lt;/div&gt;

    &lt;div class="btn-group"&gt;
        &lt;button class="btn btn-primary btn-small"&gt;
            &lt;i class="fa fa-angle-left"&gt;&lt;/i&gt;
        &lt;/button&gt;
        &lt;button class="btn btn-primary btn-small"&gt;
            &lt;i class="fa fa-angle-right"&gt;&lt;/i&gt;
        &lt;/button&gt;
    &lt;/div&gt;
      </code></pre>
    </section>
    
    <script>
      $(document).ready(function() {
        $('pre code').each(function(i, block) {
          hljs.highlightBlock(block);
        });
      });
    </script>
  </body>
</html>